/* 
  学习目标：useEffect发送请求
*/

import React, { useEffect, useState } from 'react';
// 0. 做准备工作：下载axios、封装request.js 导入request.js
import request from './utils/request';

export default function App() {
  // 1. 声明list状态
  const [list, setList] = useState([]);
  // 2. 使用useEffect请求数据, 并更新list
  // ❌ useEffect只接受同步函数，箭头函数钱不要加async会报错
  useEffect(() => {
    // ✅在useEffect中定义异步函数，并且调用它
    async function loadData() {
      const res = await request({
        url: '/v1_0/channels',
      });
      setList(res.data.channels);
    }
    loadData();
  }, []);
  // 3. 显示在界面上

  return (
    <div>
      {list.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}
